<template>
  <div class="cssMode">
    <el-button
      type="primary"
      :icon="CSSMode?Sunny:Moon"
      @click="DKmode"
      :round="true"
    ></el-button>
  </div>
</template>
   
<script setup lang='js'>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { inject } from "vue";
const CSSMode = inject("CSSMode")
function DKmode(){
    if(CSSMode.value){
        CSSMode.value=false
        document.body.classList.remove("light")
        document.body.classList.add("dark")
    }else{
        CSSMode.value=true
        document.body.classList.remove("dark")
        document.body.classList.add("light")
    }
}
DKmode()
</script>
   
<style scoped>
.cssMode {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}
</style>